<template>
  <div>
    <search
            ref="search"
            :isReloadIvr="false"
            :showAdvSearch="false"
            :inputTitle="$t('configLazyLoad.process.processTip')"
            @add="edit"
            @refresh="refresh"
            @turnPage="turnPage"
            @search="search"
            :currentPage="currentPage"
            :count="count"
            :pageSize="10"
            :isReloadWebchatProcess="true"
            @webchatReload="reloadProcess"
    >
    </search>
    <el-table
            ref="multipleTable"
            size="mini"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%">
      <el-table-column
        :label="$t('configLazyLoad.process.nodeName1')">
        <template scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column
              :label="$t('config.channel.lastUpdateTime')">
        <template scope="scope">{{ scope.row.updateTime }}</template>
      </el-table-column>
      <el-table-column
        :label="$t('configLazyLoad.process.isEffective')">
        <template scope="scope" ><span :class="scope.row.using ? 'using_suer' : 'using_no'" v-html="scope.row.using ? $t('configLazyLoad.process.effective') : $t('configLazyLoad.process.invalid')"></span></template>
      </el-table-column>
      <el-table-column
              :label="$t('public.operate')">
        <template scope="scope">
          <el-button type="text" @click="edit(scope.row)" size="small">{{$t('public.edit')}}</el-button>
          <el-button type="text" class="delete_text" @click="deleteNode(scope.row)" size="small">{{$t('public.delete')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import search from '../../../base/search.vue'
  import { deepClone } from '@utils/m7Utils.js'
  import * as types from '@modules/config/channelConfig/webchatSchdule/mutation-types.js'
  export default{
    name: 'custRouteNodeList',
    data () {
      return {
        currentPage: 1,
        pageSize: 10
      }
    },
    props: {
      random: Number
    },
    watch: {
      random () {
        this.$refs.search.resetForm()
        this.refresh()
      }
    },
    computed: {
      tableData () {
        let arr = []
        let allList = deepClone(this.$store.state.config.channelConfig.webchatSchdule.custRouteNode)
        let startNum = (this.currentPage - 1) * 10
        let endNum = this.currentPage * 10
        allList.forEach((item, index) => {
          if (index >= startNum && index < endNum) {
            arr.push(item)
          }
        })
        return arr
      },
      count () {
        return this.$store.state.config.channelConfig.webchatSchdule.custRouteNode.length
      }
    },
    methods: {
//      翻页
      turnPage (data) {
        this.currentPage = data
      },
//      修改
      edit (obj) {
        this.$emit('edit', obj)
      },
//      删除客户路由节点
      deleteNode (obj) {
        let that = this
        this.$confirm(this.$t('configLazyLoad.process.processLabel48'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          let data = {
            _id: obj._id
          }
          that.$store.dispatch('delNode', data).then((res) => {
            if (res.success) {
              that.refresh()
              that.$message.success(this.$t('config.channel.deleteSuccess'))
            }
          })
        })
      },
      refresh () {
        this.currentPage = 1
        this.$emit('refresh')
      },
      search (data) {
        this.currentPage = 1
        this.$store.commit(types.SEARCH_WEBCHAT_SCHDULE_LIST_NODE, {type: 'custRoute', node: 'custRouteNode', data: data})
      },
//      生效
      reloadProcess () {
        this.$store.dispatch('reloadProcess', {}).then((res) => {
          if (res.success) {
            this.$message.success(this.$t('configLazyLoad.process.effectiveSuccessfully'))
            let random = Math.random()
            this.$store.commit(types.SET_RELOAD_NODE, random)
          } else {
            this.$message.error(this.$t('configLazyLoad.process.effectiveFail'))
          }
        })
      }
    },
    components: {
      search
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../../assets/common.styl"
  .searchWrap
    border 1px solid #e7e7eb
    border-bottom none
  .using_suer
    color $c-main
  .using_no
    color $c-pink
  .delete_text
    color #ff6b6b !important
</style>
